<template>
    <div class="taobaowang">
        <el-container>
            <el-main>
                <el-row :gutter="10">
                    <el-col :span="12">
                        <div class="box">
                            <h2><img :src="res.meirihaodian.pic" :alt="res.meirihaodian.title"> <small>{{ res.meirihaodian.text }}</small></h2>
                            <el-row :gutter="10">
                                <el-col :span="12" v-for="(item,index) in res.meirihaodian.lists" :key="index">
                                    <h3>{{ item.title }}</h3>
                                    <el-row :gutter="2">
                                        <el-col :span="16">
                                            <a href="">
                                                <img class="pic" :src="item.pics[0].src" alt="">
                                            </a>
                                        </el-col>
                                        <el-col :span="8">
                                            <a href="">
                                                <img class="pic2 pic2-1" :src="item.pics[1].src" alt="">
                                            </a>
                                            <a href="">
                                                <img class="pic2" :src="item.pics[2].src" alt="">
                                            </a>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="box">
                            <h2><img :src="res.taobaozhibo.pic" :alt="res.taobaozhibo.title"> <small>{{ res.taobaozhibo.text }}</small></h2>
                            <el-row :gutter="10">
                                <el-col :span="12" v-for="(item,index) in res.taobaozhibo.lists" :key="index">
                                    <h3>{{ item.title }} <small>{{ item.see }}</small></h3>
                                    <el-row :gutter="2">
                                        <el-col :span="16">
                                            <a href="">
                                                <img class="pic" :src="item.pics[0].pic" alt="">
                                                <span class="text">{{ item.pics[0].text }}</span>
                                            </a>
                                        </el-col>
                                        <el-col :span="8">
                                            <a href="">
                                                <img class="pic2 pic2-1" :src="item.pics[1].pic" alt="">
                                            </a>
                                            <a href="">
                                                <img class="pic2" :src="item.pics[2].pic" alt="">
                                            </a>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </div>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    //模拟请求到的数据
    let dataSourse = {
        "meirihaodian": {
            "pic": require("../assets/taobaowang/meirihaodian.png"),
            "title": "每日好店",
            "text": "发现深藏的好店",
            "lists": [{
                    "title": "万能集市",
                    "pics": [{
                            "link": "",
                            "src": require("../assets/taobaowang/1.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobaowang/2.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobaowang/3.webp")
                        }
                    ]
                },
                {
                    "title": "淘宝江湖",
                    "pics": [{
                            "link": "",
                            "src": require("../assets/taobaowang/4.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobaowang/5.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobaowang/6.webp")
                        }
                    ]
                },
                {
                    "title": "深藏不露",
                    "pics": [{
                            "link": "",
                            "src": require("../assets/taobaowang/7.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobaowang/8.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobaowang/9.webp")
                        }
                    ]
                },
                {
                    "title": "高手林立",
                    "pics": [{
                            "link": "",
                            "src": require("../assets/taobaowang/10.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobaowang/11.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobaowang/12.webp")
                        }
                    ]
                }
            ]
        },
        "taobaozhibo": {
            "pic": require("../assets/taobaowang/taobaozhibo.png"),
            "title": "淘宝直播",
            "text": "你的爱豆直播等你哟！",
            "lists": [{
                    "title": "aj1黑脚趾",
                    "see": "6193观看",
                    "pics": [{
                            "pic": require("../assets/taobaowang/13.webp"),
                            "link": "",
                            "text": "aj潮鞋半价"
                        },
                        {
                            "pic": require("../assets/taobaowang/14.webp"),
                            "link": "",
                            "text": ""
                        },
                        {
                            "pic": require("../assets/taobaowang/15.webp"),
                            "link": "",
                            "text": ""
                        }
                    ]
                },
                {
                    "title": "泰盛直播",
                    "see": "812观看",
                    "pics": [{
                            "pic": require("../assets/taobaowang/16.webp"),
                            "link": "",
                            "text": "夏秋装新款"
                        },
                        {
                            "pic": require("../assets/taobaowang/17.webp"),
                            "link": "",
                            "text": ""
                        },
                        {
                            "pic": require("../assets/taobaowang/18.webp"),
                            "link": "",
                            "text": ""
                        }
                    ]
                },
                {
                    "title": "品牌折扣",
                    "see": "4300观看",
                    "pics": [{
                            "pic": require("../assets/taobaowang/19.webp"),
                            "link": "",
                            "text": "品牌冬装大件"
                        },
                        {
                            "pic": require("../assets/taobaowang/20.webp"),
                            "link": "",
                            "text": ""
                        },
                        {
                            "pic": require("../assets/taobaowang/21.webp"),
                            "link": "",
                            "text": ""
                        }
                    ]
                },
                {
                    "title": "wujunga",
                    "see": "508观看",
                    "pics": [{
                            "pic": require("../assets/taobaowang/22.webp"),
                            "link": "",
                            "text": "潮鞋品鉴"
                        },
                        {
                            "pic": require("../assets/taobaowang/23.webp"),
                            "link": "",
                            "text": ""
                        },
                        {
                            "pic": require("../assets/taobaowang/24.webp"),
                            "link": "",
                            "text": ""
                        }
                    ]
                }
            ]
        }
    }

    export default {
        name: 'TaoBaoWang',
        data() {
            return {
                res: dataSourse
            }
        }
    }
</script>

<style scoped>
    .taobaowang {
        background-color: #f4f4f4;
    }

    .el-container {
        width: 1200px;
        margin: auto;
    }

    img {
        width: 100%;
        display: block;
    }

    h2 {
        margin: 0;
    }

    h2 img {
        width: auto;
        height: 24px;
        display: inline-block;
    }

    small {
        font-size: 12px;
        font-weight: 300;
        color: #999;
    }

    h2 small {
        position: relative;
        top: -7px;
    }

    h3 {
        font-size: 16px;
        font-weight: 300;
    }

    .pic {
        height: 180px;
    }

    .pic2 {
        height: 89px;
    }

    .pic2-1 {
        margin-bottom: 2px;
    }

    a {
        display: block;
        position: relative;
    }

    .box {
        background: #fff;
        padding: 20px;
    }

    .text {
        position: absolute;
        bottom: 6px;
        left: 16px;
        color: #fff;
    }
</style>
